import { ref, onMounted } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { setTabList, getTabList } from '@/composables/tag-list'
import { ArrowDown } from '@element-plus/icons-vue'
export function useTagList() {
    const route = useRoute()

    // 从route中获取当前路由 并且赋值给activeTab 刷新页面中的标签
    const activeTab = ref(route.path)


    const tabList = ref([
        {
            title: '仪表盘',
            path: "/admin/index"
        },
    ])

    // 在路由切换前被调用
    onBeforeRouteUpdate((to, from) => {

        //路由切换之前调用 获取路由的path 和 title 加入到tags中去
        //同样需要将已添加的标签数据存储到 cookie 中，当页面重新加载时，再从 cookie 中获取，重新渲染到页面。
        addTab({
            title: to.meta.title,
            path: to.path
        })
        activeTab.value = to.path
    })

    // 添加 Tab 标签页
    function addTab(tab) {
        // 标签是否不存在
        let isTabNotExisted = tabList.value.findIndex(item => item.path == tab.path) == -1
        // 如果不存在
        if (isTabNotExisted) {
            // 添加标签
            tabList.value.push(tab)
        }
        setTabList(tabList.value)
    }

    function initTabList() {
        // 从 cookie 中获取缓存起来的标签导航栏数据
        let tabs = getTabList()
        // 若不为空，则赋值
        if (tabs) {
            tabList.value = tabs
        }
    }
    // 初始化标签导航栏
    // 在组件挂载时初始化标签列表
    onMounted(() => {
        initTabList()
    })



    const router = useRouter()

    // 标签页切换事件 切换路由跳转
    const tabChange = (path) => {
        // 设置被激活的 Tab 标签
        activeTab.value = path
        // 路由跳转
        router.push(path)
    }

    /**
     * 移除指定的标签页
     * @param {string} targetName - 要移除的标签页的名称（路径）
     */
    const removeTab = (targetName) => {
        // 获取当前的标签列表
        const tabs = tabList.value
        // 获取当前活动的标签页名称
        let activeName = activeTab.value

        // 如果移除的是当前活动的标签页
        if (activeName === targetName) {
            // 遍历标签列表找到要移除的标签页
            tabs.forEach((tab, index) => {
                if (tab.path === targetName) {
                    // 选择下一个标签页作为新的活动标签页，如果没有下一个则选择上一个
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                        activeName = nextTab.path
                    }
                }
            })
        }

        // 更新活动标签页的引用 
        // 如果删除的是当前的标签 则会刷新cativable 
        // 然后激活 @tab-change="tabChange" 触发 实现路由跳转 
        // 跳转之前触发onBeforeRouteUpdate 刷新cookie中的标签导航栏数据
        activeTab.value = activeName
        // 更新标签列表，移除指定的标签页
        tabList.value = tabs.filter((tab) => tab.path !== targetName)
    }

    // 处理关闭标签菜单事件
    const handleCloseTab = (command) => {
        console.log(command)
        // 首页路由
        let indexPath = '/admin/index'
        // 处理关闭其他
        if (command == 'closeOthers') {
            // 仅过滤出首页和当前页
            tabList.value = tabList.value.filter((tab) => tab.path == indexPath || tab.path == activeTab.value)
        } else if (command == 'closeAll') { // 处理关闭全部
            // 切换回首页
            activeTab.value = indexPath
            // 只保留首页
            tabList.value = tabList.value.filter((tab) => tab.path == indexPath)
            // 切换标签页
            tabChange(activeTab.value)
        }

        // 设置到 cookie 中
        setTabList(tabList.value)
    }
    //全部return
    return {
        tabList,
        activeTab,
        tabChange,
        removeTab,
        handleCloseTab,
        ArrowDown
    }
}